import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

// 引入组件
// import login from '../pages/login/login.vue'
// import register from '../pages/register/register.vue'
// import index from '../pages/index/index.vue'
// import detail from '../pages/detail/detail.vue'
// import search from '../pages/search/search.vue'
// import list from '../pages/list/list.vue'

// 懒加载
// 第一种写法：
let login = () => import('../pages/login/login.vue')
let register = () => import('../pages/register/register.vue')
let index = () => import('../pages/index/index.vue')
let detail = () => {
  return import('../pages/detail/detail.vue')
}
let search = () => import('../pages/search/search.vue')
let list = () => import('../pages/list/list.vue')
// import test from '../pages/test/test.vue'
let test = () => import('../pages/test/test.vue')
// 引入二级路由
// import home from '../pages/home/home.vue'
// import cate from '../pages/cate/cate.vue'
// import shop from '../pages/shop/shop.vue'
// import mine from '../pages/mine/mine.vue'

//第三种写法： import() 返回值是一个promise对象
/* let mine = () => {
  return Promise.resolve(import("../pages/mine/mine.vue"))
} */
// 路由规则
const routes = [
  {
    path: '/login',
    component: login,
    // 元信息
    meta: {
      title: '登录'
    },
    // 命名路由 name
    name: '登录',
  },
  {
    path: '/register',
    component:register,
    //配置多个组件 命名视图
    /* components: {
      default: register,
      second: test
    }, */
    // alias:别名
    alias: '/r',
    // 元信息
    meta: {
      title: '注册'
    },
  },
  {
    path: '/index',
    component: index,

    // 不需要加/,
    children: [
      {
        path: 'home',
        // 懒加载第二种写法(推荐)
        component: () => import('../pages/home/home.vue'),
        alias: 'h',
        // 元信息
        meta: {
          title: '首页'
        },
      },
      {
        path: 'cate',
        component: () => import('../pages/cate/cate.vue'),
        alias: 'c',
        // 元信息
        meta: {
          title: '分类'
        },
      },
      {
        path: 'shop',
        component: () => import('../pages/shop/shop.vue'),
        alias: 's',
        // 元信息
        meta: {
          title: '购物车'
        },
      },
      {
        path: 'mine',
        component: () => import('../pages/mine/mine.vue'),
        alias: 'm',
        // 元信息
        meta: {
          title: '我的'
        },
      },
      // 二级重定向
      {
        path: '',
        redirect: 'home'
      },
    ]
  },
  {
    path: '/detail/:id',
    component: ()=>import('../pages/detail/detail.vue'),
    // 元信息
    meta: {
      title: '详情页'
    },
    // 给详情页面加独享守卫，规定只能是法师才能访问，
    // 进来之前
    beforeEnter(to, from, next) {
      console.log("路由独享守卫：beforeEnter");
      // 取到存在本地的值
      let type = localStorage.getItem('type')
      console.log(type);//1
      if (type === '1') {
        next()
      } else {
        next('/index/mine')
      }
    }

  },
  {
    path: '/search',
    component: ()=>import('../pages/search/search.vue'),
    // 元信息
    meta: {
      title: '搜索页面'
    },
  },
  {
    path: '/list',
    component: ()=>import('../pages/list/list.vue'),
    // 元信息
    meta: {
      title: '列表页',
      // keep true 缓存 没传递，undefined，就代表不想缓存
      keep:true,
    },
  },
  {
    path: '/order',
    component: ()=>import('../pages/order/order.vue'),
    // 元信息
    meta: {
      title: '确认订单'
    },
  },
  {
    path: '/addressAdd',
    component: ()=>import('../pages/addressAdd/addressAdd.vue'),
    // 元信息
    meta: {
      title: '新增地址'
    },
  },
  {
    path: '/addressList',
    component: ()=>import('../pages/addressList/addressList.vue'),
    // 元信息
    meta: {
      title: '地址管理'
    },
  },
  {
    path: '/pay',
    component: ()=>import('../pages/pay/pay.vue'),
    // 元信息
    meta: {
      title: '支付'
    },
  },
  // 重定向----->访问其他的时候，出现首页
  {
    path: '*',
    redirect: '/login'
  },

]

const router = new VueRouter({
  // 路由模式
  mode: 'hash',//# 默认
  // mode:'history',
  // 路由规则
  routes: routes,
  //滚动行为
  scrollBehavior(to, from, savePosition) {
    /*如果有历史记录，savePosition保留的是历史记录中的滚动位置；
    如果没有历史记录，savePostion是null .
    我们通过判断savePostion是否存在，存在就返回savePostion的位置；
    不存在，就返回（0,0，）*/
    if (savePosition) {
      console.log(savePosition);
      return savePosition
    } else {
      return { x: 0, y: 0 }
    }
  }
})

// 在全局前置守卫，判断前往的路径以及是否登录，从而决定是否让访问
/*to:前往的路由信息
from:从哪里来的路由信息
next：要不要继续访问
*/
router.beforeEach((to, from, next) => {
  // console.log("全局的前置守卫beforeEach");
  // console.log(to);
  // 1.先判断是不是登录或者注册的路由，直接next 
  if (to.path === '/login' || to.path === 'register') {
    next();
    return;
  };
  //  2.如果不是登录和注册，判断是否登录。 登陆了，next();
  let isLogin = localStorage.getItem('isLogin');
  if (isLogin) {
    next();
    return;
  }
  // 3.没有登录，next("/login")
  next('/login')
})

export default router
